<template>
  <div class="PieChart">
    <div v-if="chartData && chartData.length" class="chart-box">
      <div ref="chartRef" class="chart"></div>
    </div>
    <div v-else class="s-empty">
      <img src="@/assets/images/noData.png" alt />
    </div>
  </div>
</template>
<script setup name='AlarmStatistics'>
import {
  onMounted,
  defineProps,
  watch,
  nextTick,
  ref,
  onUnmounted,
  watchEffect,
} from "vue";
import { nowSize } from "@/utils/utils";
import * as echarts from "echarts";
const props = defineProps({
  chartData: {
    type: Array,
    default: () => [],
  },
  color: {
    type: Array,
    default: () => [
      "#1a75ff",
      "#00cc99",
      "#00e600",
      "#ffff00",
      "#ff5050",
      "#ac39ac",
      "#002699",
      "#005580",
    ],
  },
});
const chartRef = ref(null);
let myChart;
// 初始化echarts图表
const initChart = () => {
  if (!myChart) {
    myChart = echarts.init(chartRef.value);
  }
  let option = {
    tooltip: {
      trigger: "item",
      borderColor: "#116fc1",
      borderWidth: nowSize(2), // 设置边框宽度
      backgroundColor: "rgba(7,31,52,0.8)",
      textStyle: {
        color: "#BBD0DC",
      },
    },
    title: {
      text: "报警\n类别",
      left: "26.6%",
      y: "center",
      textStyle: {
        fontSize: nowSize(46),
        lineHeight: nowSize(58),
        color: "rgba(85, 255, 255, 0.99)",
      },
    },
    legend: {
      orient: "vertical", // 设置图例垂直排列
      x: "55%",
      top: "center",
      icon: "rect",
      itemGap: nowSize(40),
      itemWidth: nowSize(24), // 设置图例标记的宽度为正方形
      itemHeight: nowSize(24), // 设置图例标记的高度为正方形
      textStyle: {
        fontWeight: "900",
        fontSize: nowSize(40),
        padding: [0, nowSize(5), 0, nowSize(5)],
        color: "#fff",
      },
    },
    color: props.color,
    label: {
      show: false,
      position: "center",
    },
    series: [
      {
        type: "pie",
        padAngle: 6,
        radius: ["60%", "75%"],
        center: ["30%", "50%"],
        label: {
          show: false,
          position: "top",
        },
        itemStyle: {
          borderRadius: 0,
        },
        data: props.chartData,
      },
    ],
  };
  option && myChart.setOption(option, true);
};
// 判断是否有数据，有数据渲染echart图
const handleResize = async () => {
  if (myChart) {
    myChart.resize();
    initChart();
  }
};
watchEffect(async () => {
  await nextTick();
  initChart();
});
onMounted(() => {
  window.addEventListener("resize", handleResize);
});
onUnmounted(() => {
  myChart && myChart.dispose();
  window.removeEventListener("resize", handleResize);
});
</script>
<style lang="less" scoped>
.PieChart {
  width: 100%;
  height: 100%;
  .s-empty {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 513px;
      height: 377px;
    }
  }
  .chart-box {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url("@/assets/images/pie-bg.png");
    background-size: 40% 75%;
    background-repeat: no-repeat;
    background-position: 16.5% center;
    .chart {
      width: 100%;
      height: 100%;
    }

    .num {
      display: inline-block;
      color: #f89929;
      margin-top: 25px;
    }
  }
}
</style>
